/**
 * @desc 根据文字生成头像
 *@param {Object} options 配置
 *  @param {String} text 文字
 *  @param {Number} canvasSize 画布大小
 *  @param {Number} fontSize 文字大小
 *  @param {HEX} color 文字颜色
 *  @param {HEX} bgColor 背景颜色
 *  @returns {String} url 生成的图片地址
 */
export function generateTextAvatar(options) {
  const defaultOptions = {
    text: "A",
    canvasSize: 200,
    fontSize: 100,
    color: "#fff",
    bgColor: "#4ebf8b",
  };

  const { text, canvasSize, fontSize, color, bgColor } = {
    ...defaultOptions,
    ...options,
  };

  // 创建一个隐藏的Canvas元素
  const canvas = document.createElement("canvas");
  canvas.width = canvasSize;
  canvas.height = canvasSize;
  canvas.style.display = "none";
  document.body.appendChild(canvas);

  // 获取2D渲染上下文
  const ctx = canvas.getContext("2d");

  // 设置背景颜色
  ctx.fillStyle = bgColor;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 设置字体样式
  ctx.font = `${fontSize}px Arial`;
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";

  // 文字内容和颜色
  // 绘制文字到Canvas
  ctx.fillStyle = color;
  ctx.fillText(text, canvas.width / 2, canvas.height / 2);

  // 将Canvas内容转换为Image，并清理DOM
  const imageDataUrl = canvas.toDataURL("image/png");
  document.body.removeChild(canvas);

  return imageDataUrl;
}

// // 使用函数生成文字头像图片
// const text = "张";
// const avatarImageUrl = generateTextAvatar(text);
// console.log(avatarImageUrl);

// // 在HTML中使用生成的图片URL
// // （假设有一个id为'textAvatarImage'的img标签）
// document.getElementById('textAvatarImage').src = avatarImageUrl;
